<template>
    <div class="main">
        <div class="head-wrap flex-jsb">
            <div class="flex">
                <el-form :model="form" :inline="true" ref="form" label-width="100px" class="form">
                    <el-form-item label="库房名称：" prop="roomId">
                        <el-select size="mini" v-model="form.roomId" placeholder="请选择库房">
                            <el-option :label="item.title" :value="item.resourceId" :key="item.resourceId"
                                v-for="item in selecData" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div style="width: 130px;">
                <el-button size="mini" @click="handleRset">重置</el-button>
                <el-button size="mini" type="primary" @click="handleSelect">查询</el-button>
            </div>
        </div>
        <div class="bottom-wrap mt15">
            <div class="flex-jsb mt15">
                <div></div>
                <el-button size="mini" type="primary" @click="handleCreate">新增</el-button>
            </div>
            <div class="table-wrap mt15">
                <el-table :data="logList" ref="multipleTable" height="570" style="width: 100%"
                    :cell-style="{ color: '#333' }" class="table">
                    <el-table-column prop="resourceName" label="库房名称" min-width="250" />
                    <el-table-column prop="robotName" label="机器人名称" min-width="250" />
                    <el-table-column prop="robotIpAddress" label="机器人IP地址" min-width="250" />
                    <el-table-column prop="cameraName" label="摄像头名称" min-width="250" />
                    <el-table-column prop="cameraNumber" label="摄像头编号" min-width="150" />
                    <el-table-column prop="createTime" label="操作时间" min-width="250">
                        <template slot-scope="scope">
                            <div>{{ formatDate(scope.row.createTime) }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="190" fixed="right">
                        <template v-slot="{ row }">
                            <el-button class="text-btn-table" type="text" @click="handleEdit(row)">修改</el-button>
                            <el-button class="text-btn-table" type="text" @click="handleDelete(row)">删除</el-button>
                            <el-button v-if="row.resourceId" class="text-btn-table" type="text"
                                @click="handleOperation(row)">解绑库房</el-button>
                            <el-button v-else class="text-btn-table" type="text"
                                @click="handleOperation(row)">绑定库房</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="flex-jsb">
                    <div></div>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="form.start" :page-sizes="[10, 20, 30, 40]" :page-size="form.limit"
                        layout="total, sizes, prev, pager, next, jumper" :total="total"
                        class="ml25 mt15 systemPagination el-pagination">
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- 新增or编辑 -->
        <el-dialog :title="titleText" :show-close="false" @close="cancel" :visible.sync="dialogVisible" width="800px"
            :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form :model="currentRow" ref="planForm" :rules="rules" label-width="140px" class="form">
                <el-row :gutter="10">
                    <el-col :span="24">
                        <el-divider>摄像头配置</el-divider>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="摄像头名称：" prop="cameraName">
                            <el-input size="mini" clearable v-model="currentRow.cameraName"
                                placeholder="请输入摄像头名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="摄像头编号：" prop="cameraNumber">
                            <el-input size="mini" clearable v-model="currentRow.cameraNumber" placeholder="请输入摄像头编号"
                                :disabled="formType == 'edit'"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="摄像头IP地址：" prop="cameraIpAddress">
                            <el-input size="mini" clearable v-model="currentRow.cameraIpAddress"
                                placeholder="请输入摄像头IP地址"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="摄像头端口号：" prop="cameraPort">
                            <el-input size="mini" clearable v-model="currentRow.cameraPort"
                                placeholder="请输入摄像头端口号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="摄像头用户名：" prop="cameraUsername">
                            <el-input size="mini" clearable v-model="currentRow.cameraUsername"
                                placeholder="请输入摄像头用户名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="摄像头密码：" prop="cameraPassword">
                            <el-input size="mini" clearable v-model="currentRow.cameraPassword" show-password
                                auto-complete="new-password" placeholder="请输入摄像头密码"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-divider>机器人配置</el-divider>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="机器人名称：" prop="robotName">
                            <el-input size="mini" clearable v-model="currentRow.robotName"
                                placeholder="请输入机器人名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="机器人编号：" prop="robotNumber">
                            <el-input size="mini" clearable v-model="currentRow.robotNumber" placeholder="请输入机器人编号"
                                :disabled="formType == 'edit'"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="机器人IP地址：" prop="robotIpAddress">
                            <el-input size="mini" clearable v-model="currentRow.robotIpAddress"
                                placeholder="请输入机器人IP地址"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="机器人端口号：" prop="robotPort">
                            <el-input size="mini" clearable v-model="currentRow.robotPort"
                                placeholder="请输入机器人端口号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="ok">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 库房绑定机器人配置 -->
        <el-dialog title="绑定库房" :show-close="false" @close="cancel2" :visible.sync="dialogVisible2" width="800px"
            :close-on-click-modal="false" :close-on-press-escape="false">
            <el-table :data="selecData" height="400" style="width: 100%" :cell-style="{ color: '#333' }" class="table">
                <el-table-column prop="title" label="库房名称" />
                <el-table-column prop="resourceId" label="库房编号" />
                <el-table-column label="操作" align="center" width="100" fixed="right">
                    <template v-slot="{ row }">
                        <el-button class="text-btn-table" type="text" @click="ok2(row)">绑定</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel2">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getRobotList, addRobotSetting, detailRobotSetting, updateRobotSetting, deleteRobotSetting, binging, cancelBinging } from "@/api/rabotManageApi.js";
import { getMachineRoom } from "@/api/computerRoomApi.js";
import utils from "@/utils/date.js";
import { validateIPv4, validatePort } from "@/utils/validate";
export default {
    data() {
        return {
            selecData: [],
            form: {
                roomId: "",
                limit: 10,
                start: 1,
            },
            logList: [],
            total: 0,
            titleText: "新增机器人配置",
            dialogVisible: false,
            dialogVisible2: false,
            formType: "add",
            currentRow: {
                cameraIpAddress: "",
                cameraName: "",
                cameraNumber: "",
                cameraPassword: "",
                cameraPort: "",
                cameraUsername: "",
                robotIpAddress: "",
                robotName: "",
                robotNumber: "",
                robotPort: "",
            },
            currentBobot: {},
            rules: {
                cameraIpAddress: [
                    { validator: validateIPv4 },
                    { required: true, message: "请输入摄像头IP地址", trigger: "blur" },
                ],
                cameraPort: [
                    { validator: validatePort },
                    { required: true, message: "请输入摄像头端口号", trigger: "blur" },
                ],
                cameraUsername: [
                    { required: true, message: "请选择摄像头用户名", trigger: "blur" },
                ],
                cameraPassword: [
                    { required: true, message: "请选择摄像头密码", trigger: "blur" },
                ],
                robotIpAddress: [
                    { validator: validateIPv4 },
                    { required: true, message: "请输入机器人IP地址", trigger: "blur" },
                ],
                robotPort: [
                    { validator: validatePort },
                    { required: true, message: "请输入机器人端口号", trigger: "blur" },
                ],
            },
        };
    },
    mounted() {
        this.getMachineRoomData();
        this.getRobotListData({ ...this.form, start: this.form.start - 1 });
    },
    methods: {
        getMachineRoomData() {
            getMachineRoom().then((res) => {
                if (res.code == "200") {
                    this.selecData = res.info;
                }
            });
        },
        getRobotListData(data) {
            getRobotList(data).then((res) => {
                if ((res.code = "200")) {
                    this.logList = res.info;
                    this.total = res.totalCount;
                }
            });
        },
        handleSizeChange(val) {
            this.form.limit = val;
            this.form.start = 1;
            this.getRobotListData({ ...this.form, start: 0 });
        },

        handleCurrentChange(val) {
            this.form.start = val;
            this.getRobotListData({ ...this.form, start: this.form.start - 1 });
        },
        formatDate(date) {
            return utils.formatter(date, "yyyy-MM-dd hh:mm:ss");
        },
        handleRset() {
            this.form = {
                roomId: "",
                limit: 10,
                start: 1,
            };
            this.getRobotListData({ ...this.form, start: 0 });
        },
        handleSelect() {
            this.getRobotListData({ ...this.form, start: 0 });
        },
        handleCreate() {
            this.formType = "add";
            this.currentRow = {
                cameraIpAddress: "",
                cameraName: "",
                cameraNumber: "",
                cameraPassword: "",
                cameraPort: "",
                cameraUsername: "",
                robotIpAddress: "",
                robotName: "",
                robotNumber: "",
                robotPort: "",
            };
            this.dialogVisible = true;
        },
        handleEdit(row) {
            detailRobotSetting(row.robotNumber).then(res => {
                if (res.code == 200) {
                    this.titleText = "编辑机器人配置";
                    this.formType = "edit";
                    this.currentRow = res.info;
                    this.dialogVisible = true;
                }
            })
        },
        handleOperation(row) {
            if (row.resourceId) {
                this.$confirm("此操作将解绑机器人与库房配置, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    cancelBinging({
                        robotNumber: row.robotNumber,
                        roomId: row.resourceId
                    }).then(res => {
                        if (res.code == 200) {
                            this.$message({
                                message: "解绑成功",
                                type: "success",
                            });
                            this.getRobotListData({
                                ...this.form, start: 0
                            })
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error",
                            });
                        }
                    })
                })
            } else {
                this.currentBobot = row;
                this.dialogVisible2 = true;
            }
        },
        handleDelete(row) {
            this.$confirm("此操作将删除该机器人配置, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    deleteRobotSetting(row.robotNumber).then((res) => {
                        if (res.code == 200) {
                            this.$message({
                                message: "删除成功",
                                type: "success",
                            });
                            this.getRobotListData({
                                ...this.form, start: 0
                            })
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error",
                            });
                        }
                    });
                })
        },
        ok() {
            this.$refs.planForm.validate((valid) => {
                if (valid) {
                    if (this.formType == "add") {
                        addRobotSetting(this.currentRow).then((res) => {
                            if (res.code == 200) {
                                this.$message({
                                    message: "添加成功",
                                    type: "success",
                                });
                                this.cancel();
                                this.getRobotListData({ ...this.form, start: 0 });
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error",
                                });
                            }
                        });
                    } else {
                        updateRobotSetting(this.currentRow).then((res) => {
                            if (res.code == 200) {
                                this.$message({
                                    message: "修改成功",
                                    type: "success",
                                });
                                this.cancel();
                                this.getRobotListData
                                    ({ ...this.form, start: 0 });
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error",
                                });
                            }
                        });
                    }
                }
            });
        },
        cancel() {
            this.currentRow = {
                cameraIpAddress: "",
                cameraName: "",
                cameraNumber: "",
                cameraPassword: "",
                cameraPort: "",
                cameraUsername: "",
                robotIpAddress: "",
                robotName: "",
                robotNumber: "",
                robotPort: "",
            };
            this.$refs.planForm.clearValidate();
            this.dialogVisible = false;
        },
        ok2(row) {
            binging({
                robotNumber: this.currentBobot.robotNumber,
                roomId: row.resourceId
            }).then(res => {
                if (res.code == 200) {
                    this.$message({
                        message: "绑定成功",
                        type: "success",
                    });
                    this.cancel2();
                    this.getRobotListData({ ...this.form, start: 0 });
                } else {
                    this.$message({
                        message: res.msg,
                        type: "error",
                    });
                }
            })
        },
        cancel2() {
            this.currentBobot = {};
            this.dialogVisible2 = false;
        }
    },
};
</script>
<style lang="scss" scoped>
.main {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin: 0 auto;

    .head-wrap {
        padding: 20px 17px;
        border-radius: 6px;

        /deep/ .el-form-item {
            margin-bottom: 0;

            .el-form-item__label {
                color: #000;
            }
        }
    }

    .head-wrap,
    .bottom-wrap {
        background: #ffffff;
        box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
    }

    .bottom-wrap {
        padding: 0 15px;
        border-radius: 10px;
        height: 89%;
        overflow: hidden;

        .table-wrap {
            height: 100%;
            overflow: auto;
            color: #333;

            .table {
                border: 1px solid #f0f0f0;
                border-radius: 0px 0px 6px 6px;
                overflow: hidden;
            }

            /deep/ .el-table__header tr,
            /deep/ .el-table__header th {
                background-color: var(--system-table-header-bgc) !important;
                color: #333;
                font-weight: 400;
            }

            .state {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin-right: 5px;
            }

            .state1 {
                background: #ff9000;
            }

            .state2 {
                background: #21b795;
            }
        }
    }
}

.flex-ac {
    display: flex;
    align-items: center;
}

.mt15 {
    margin-top: 15px;
}

.flex {
    display: flex;
}

.flex-jsb {
    display: flex;
    justify-content: space-between;
}

.mt25 {
    margin-top: 25px;
}

.ml25 {
    margin-left: 25px;
}
</style>
